<script setup lang="ts">
import SvgIcon from '@/components/icon/SvgIcon.vue'
import UserInfo from '@/views/home/UserInfo.vue'
import { provide, ref } from 'vue'
const userInfoActive = ref(false)
provide('userInfoActive', userInfoActive)
</script>

<template>
  <user-info v-if="userInfoActive" />

  <div class="panel" v-else>
    <section>
      <p @click="() => (userInfoActive = !userInfoActive)">
        <span>个人详情</span>
        <svg-icon size="15" color="#000" name="right" />
      </p>
      <el-divider style="margin: 10px 0" />
    </section>

    <section>
      <p>
        <span style="font-weight: 600">数据备份</span>
      </p>
      <p>
        <span>导出布局</span>
        <el-button type="primary" size="small">导出</el-button>
      </p>
      <p>
        <span>导入布局</span>
        <el-button type="primary" size="small">导入</el-button>
      </p>
      <el-divider style="margin: 10px 0" />
    </section>
  </div>
</template>

<style scoped lang="less">
.panel {
  width: 100%;
  padding-left: 5px;
  background-color: white;

  section {
    margin-top: @marginTop;

    p:first-of-type {
      display: flex;
      justify-content: space-between;
      justify-items: center;
      svg {
        margin-right: 10px;
      }
    }

    p:first-of-type:hover {
      cursor: pointer;
    }

    p:first-of-type ~ p {
      margin-top: @marginTop;
      margin-left: @marginLeft;
      font-size: 14px;
      span {
        margin-right: 10px;
      }
    }
  }
}
</style>
